<template>
  <div class="cert-table-wrap">
    <div class="cert-title">
      <div><img src="@/static/images/d_logo.png" /></div>
      <div class="right-text">物流源数字化回单</div>
    </div>
    <div class="box-middle">
      <span>合同编号：{{certEreData.contractCode || '--' }}</span>
      <span>订单编号：{{certEreData.orderCode || '--' }}</span>
      <span>签收时间：{{ certEreData.signTime || '--' }}</span>
    </div>
    <!-- 表格采用td th td -->
    <table v-if="!!certEreData"
           border="1px"
           cellspacing="10px"
           cellpadding="10px">
      <tr>
        <td rowspan="5">发货方</td>
        <td>发货公司</td>
        <td colspan="4">{{certEreData.fromCompanyName}}</td>
        <td rowspan="5">收货方</td>
        <td>收货公司</td>
        <td colspan="6">{{certEreData.toCompanyName}}</td>
      </tr>
      <tr>
        <td>发货人</td>
        <td colspan="4">{{certEreData.fromManName}}</td>
        <td>收货人</td>
        <td colspan="6">{{certEreData.toManName}}</td>
      </tr>
      <tr>
        <td>发货电话</td>
        <td colspan="4">{{certEreData.fromContact}}</td>
        <td>收货电话</td>
        <td colspan="6">{{certEreData.toContact}}</td>
      </tr>
      <tr>
        <td>发货时间</td>
        <td colspan="4">{{certEreData.fromTime}}</td>
        <td>收货时间</td>
        <td colspan="6">{{certEreData.toTime}}</td>
      </tr>
      <tr>
        <td>发货地址</td>
        <td colspan="4">{{certEreData.from}}</td>
        <td>收货地址</td>
        <td colspan="6">{{certEreData.to}}</td>
      </tr>
      <tr>
        <td :rowspan="certEreData.goods.length + 1">发货明细</td>
        <td>货物名称</td>
        <td>规格</td>
        <td>发货数</td>
        <td>重量(公斤)</td>
        <td>体积(立方米)</td>
        <td :rowspan="certEreData.goods.length + 1">收货明细</td>
        <td>货物名称</td>
        <td>规格</td>
        <td>发货数</td>
        <td>实签数</td>
        <td>签收异常</td>
        <td>重量(公斤)</td>
        <td>体积(立方米)</td>
      </tr>
      <tr v-for="(item, index) in certEreData.goods"
          :key="index">
        <td>{{item.goodsName}}</td>
        <td>{{item.goodsSpec}}</td>
        <td>{{item.goodFromTotalAmount}}</td>
        <td>{{item.goodTotalWeight}}</td>
        <td>{{item.goodTotalVolume}}</td>
        <!-- 分割 -->
        <td>{{item.goodsName || '--'}}</td>
        <td>{{item.goodsSpec || '--'}}</td>
        <td>{{item.goodFromTotalAmount || '--'}}</td>
        <td>{{item.goodToTotalAmount || '--'}}</td>
        <td>{{abnormalReplace(item.goodSignException) || '--'}}</td>
        <td>{{item.goodReceiptTotalWeight || '--'}}</td>
        <td>{{item.goodReceiptTotalVolume || '--'}}</td>
      </tr>
      <!-- 总计 -->
      <tr>
        <td>发货总计</td>
        <td></td>
        <td></td>
        <td>{{certEreData.fromTotalAmount}}</td>
        <td>{{certEreData.fromTotalWeight}}</td>
        <td>{{certEreData.fromTotalVolume}}</td>
        <!-- 分割 -->
        <td>收货总计</td>
        <td></td>
        <td></td>
        <td>{{certEreData.fromTotalAmount	}}</td>
        <td>{{certEreData.toTotalAmount	}}</td>
        <td>{{certEreData.totalSignException}}</td>
        <td>{{certEreData.toTotalWeight}}</td>
        <td>{{certEreData.toTotalVolume}}</td>
      </tr>
      <tr>
        <td colspan="14"
            class="tips">重要提示：仅供预览。</td>
      </tr>
    </table>
    <div v-if="!!certEreData"
         class="box-footer">
      时间戳： {{certEreData.signTime || '--'}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'CertTbale',
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    abnormalReplace () {
      return goods => goods.replace(/<br \/>/g, "")
    },
    certEreData () {
      return this.value
    }
  }
}
</script>

<style scoped>
.cert-title {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid var(--prev-color-text-primary);
}
.right-text {
  font-size: 24px;
  color: #000;
}
.box-middle {
  display: flex;
  justify-content: space-around;
  padding: 12px;
  /* font-size: 14px; */
  color: #000;
}
table {
  border-collapse: collapse;
  margin: 0 auto;
}
.tips {
  color: var(--prev-color-text-purered);
}
.box-footer {
  padding: 20px 80px 10px 60px;
  text-align: right;
}
</style>